<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>青橙，欢迎登录</title>
    <link rel="icon" href="/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="/css/all.css"/>
    <link rel="stylesheet" type="text/css" href="/css/pages-login.css"/>
</head>

<body>
<!-- 头部栏位 -->
<!--页面顶部-->
<div id="nav-bottom">
    <!--顶部-->
    <div class="nav-top">
        <div class="top">
            <div class="py-container">
                <div class="shortcut">
                    <ul class="fl">
                        <li class="f-item">青橙欢迎您！</li>
                        <li class="f-item">请<a href="login.html" target="_blank">登录</a>　<span><a href="register.html"
                                                                                                 target="_blank">免费注册</a></span>
                        </li>
                    </ul>
                    <div class="fr typelist">
                        <ul class="types">
                            <li class="f-item"><span>我的订单</span></li>

                            <li class="f-item"><span><a href="cart.html" target="_blank">我的购物车</a></span></li>
                            <li class="f-item"><span><a href="home.html" target="_blank">我的青橙</a></span></li>
                            <li class="f-item"><span>青橙会员</span></li>
                            <li class="f-item"><span>企业采购</span></li>
                            <li class="f-item"><span>关注青橙</span></li>
                            <li class="f-item"><span><a href="cooperation.html" target="_blank">合作招商</a></span></li>
                            <li class="f-item"><span><a href="shoplogin.html" target="_blank">商家后台</a></span></li>
                            <li class="f-item"><span>网站导航</li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>

        <!--头部-->
        <div class="header">
            <div class="py-container">
                <div class="yui3-g Logo">
                    <div class="yui3-u Left logoArea">
                        <a class="logo-bd" title="青橙" href="index.html" target="_blank"></a>
                    </div>
                    <div class="yui3-u Rit searchArea">
                        <div class="search">
                            <form action="" class="sui-form form-inline">
                                <!--searchAutoComplete-->
                                <div class="input-append">
                                    <input type="text" id="autocomplete" class="input-error input-xxlarge"/>
                                    <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>

<div id="app" class="login-box">

    <!--loginArea-->
    <div class="loginArea">
        <div class="py-container login">
            <div class="loginform">
                <ul class="sui-nav nav-tabs tab-wraped">
                    <li id="tabOtherLogin" onclick="switchOtherLogin()">
                        <a href="javascript:void(0)" data-toggle="tab">
                            <h3>扫描登录</h3>
                        </a>
                    </li>
                    <li id="tabSuiForm" class="active" onclick="switchSuiForm()">
                        <a href="javascript:void(0)" data-toggle="tab">
                            <h3>账户登录</h3>
                        </a>
                    </li>
                </ul>
                <div class="tab-content tab-wraped">
                    <div id="index" class="tab-pane ">
                        <p>二维码登录，暂为官网二维码</p>
                        <img src="/img/wx_cz.jpg"/>
                    </div>
                    <div id="profile" class="tab-pane active">
                        <form class="sui-form">
                            <div class="input-prepend"><span class="add-on loginname"></span>
                                <input id="inputName" v-model="username" type="text" placeholder="邮箱/用户名/手机号"
                                       class="span2 input-xfat">
                            </div>
                            <div class="input-prepend"><span class="add-on loginpwd"></span>
                                <input id="inputPassword" v-model="password" type="password" placeholder="请输入密码"
                                       class="span2 input-xfat">
                            </div>
                            <div class="setting">
                                <label class="checkbox inline">
                                    <input name="m1" type="checkbox" value="2" checked="">
                                    自动登录
                                </label>
                                <span class="forget">忘记密码？</span>
                            </div>
                        </form>
                        <div class="logined">
                            <div style="color:red" >{{msg}}</div>
                            <button class="sui-btn btn-block btn-xlarge btn-danger" @click="login()" target="_blank">登&nbsp;&nbsp;录</button>
                        </div>
                        <div class="otherlogin">
                            <div class="types">
                                <ul>
                                    <li><img src="/img/qq.png" width="35px" height="35px"/></li>
                                    <li><img src="/img/sina.png"/></li>
                                    <li><img src="/img/ali.png"/></li>
                                    <li><img src="/img/weixin.png"/></li>
                                </ul>
                            </div>
                            <span class="register"><a href="register.html" target="_blank">立即注册</a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--foot-->
    <div class="py-container copyright">
        <ul>
            <li>关于我们</li>
            <li>联系我们</li>
            <li>联系客服</li>
            <li>商家入驻</li>
            <li>营销中心</li>
            <li>手机品优购</li>
            <li>销售联盟</li>
            <li>品优购社区</li>
        </ul>
        <div class="address">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</div>
        <div class="beian">京ICP备08001421号京公网安备110108007702
        </div>
    </div>
</div>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script th:inline="javascript">
    function switchSuiForm() {
        document.getElementById('index').className = "tab-pane";
        document.getElementById('profile').className = "tab-pane active";
        document.getElementById('tabSuiForm').className = "active";
        document.getElementById('tabOtherLogin').className = "";
    }

    function switchOtherLogin() {
        document.getElementById('index').className = "tab-pane active";
        document.getElementById('profile').className = "tab-pane";
        document.getElementById('tabSuiForm').className = "";
        document.getElementById('tabOtherLogin').className = "active";
    }

    var app = new Vue({
        el: "#app",
        data: {
            msg: '',
            username: '',
            password: '',
            from_url: [[${from_url}]]
        },
        methods: {
        	// 登录请求
            login() {
                axios.post("/user/login?username="+this.username+"&password="+this.password)
                    .then(res => {
                        if (res.data.flag) {
							// app.msg = res.data.message;
                            window.location.href = this.from_url;
                        } else {
							app.msg = res.data.message;
                        }
                    });
            }
        }
    });
</script>
</body>
</html>